<!DOCTYPE html>
<html>

<head>
    <title>centering</title>
    <meta charset="UTF-8">
    <style type="text/css">
    div {
        margin: 10px;
    }
    </style>
</head>

<body>
    <h2>垂直居中</h2>
    <div style="border: 2px solid yellow; padding: 30px;">
        <a href="#0" style="padding-top: 10px; padding-bottom: 10px; border: 2px solid red;">单行，设置相同的上下padding</a>
    </div>
    <div style="border: 2px solid yellow; height: 100px; line-height: 100px;">
        <a href="#0" style="border: 2px solid red;">单行,将父容器的高和行高设置为一样</a>
    </div>
    <table style="border: 2px solid yellow; height: 200px;">
        <tr>
            <td style="border: 2px solid red;">多行文本，
                <br /> 将文本放在table中的td中</td>
        </tr>
    </table>
    <p style="border: 2px solid yellow; height: 200px; display: table-cell; vertical-align: middle;">多行文本，
        <br /> 将文本所在标签设置 display: table-cell; vertical-align: middle;</p>
    <div style="display: flex; justify-content: center; flex-direction: column; height: 200px; border: 2px solid yellow;">
        <a href="#" style="border: 2px solid red;">多行文本，<br />设置style="display: flex; justify-content: center; flex-direction: column; height: 400px"</a>
    </div>
</body>

</html>
